<template>
    <div class="right-container">
        <div class="right-top">
            <div id = "ssjsBg"  class="vivify floatT  ss-bg">
                <p class="ss-title">实时事件接收情况</p>
                <div class="ss-content">
                    <div class="ss-row">
                        <div class="row-label">事件标题：</div>
                        <div class="row-info clamp-text-over">{{sjjsObj.eventTitle}}</div>
                    </div>
                    <div class="ss-row">
                        <div class="row-label">事件类别：</div>
                        <div class="row-info">{{sjjsObj.eventType}}</div>
                    </div>
                    <div class="ss-row">
                        <div class="row-label">事件描述：</div>
                        <div class="row-info clamp-text-over" :title = "sjjsObj.eventDesc">{{sjjsObj.eventDesc}}</div>
                    </div>
                    <div class="ss-row">
                        <div class="row-label">事件关键词：</div>
                        <div class="row-info">{{sjjsObj.keyword}}</div>
                    </div>
                    <div class="ss-row">
                        <div class="row-label">处理单位：</div>
                        <div class="row-info">{{sjjsObj.unitName}}</div>
                    </div>
                    <div class="ss-row">
                        <div class="row-label">事件来源：</div>
                        <div class="row-info">{{sjjsObj.eventSource}}</div>
                    </div>
                </div>
            </div>
            <div id = "ssjsBg2" class="ss-bg vivify">
                <p class="ss-title">实时事件办理情况</p>
                <div class="ss-content">
                    <div class="ss-row">
                        <div class="row-label">事件标题：</div>
                        <div class="row-info clamp-text-over">{{sjblObj.eventTitle}}</div>
                    </div>
                    <div class="ss-row">
                        <div class="row-label">事件类别：</div>
                        <div class="row-info">{{sjblObj.eventType}}</div>
                    </div>
                    <div class="ss-row">
                        <div class="row-label">事件描述：</div>
                        <div class="row-info clamp-text-over" :title = "sjblObj.eventDesc">{{sjblObj.eventDesc}}</div>
                    </div>
                    <div class="ss-row">
                        <div class="row-label">事件关键词：</div>
                        <div class="row-info">{{sjblObj.keyword}}</div>
                    </div>
                    <div class="ss-row">
                        <div class="row-label">处理单位：</div>
                        <div class="row-info">{{sjblObj.unitName}}</div>
                    </div>
                    <div class="ss-row">
                        <div class="row-label">事件来源：</div>
                        <div class="row-info">{{sjblObj.eventSource}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right-middle">
            <div class="middle-row">
                <div class="sjsb-title dp4-title-bg">
                    事件上报趋势
                </div>
                <div class="sj-stat" id="stat1"></div>
            </div>
            <div class="middle-row">
                <div class="sjsb-title dp4-title-bg">
                    事件受理趋势
                </div>
                <div class="sj-stat" id="stat2"></div>
            </div>
        </div>
        <div class="right-bottom">
            <div class="pats-title dp4-title-bg">
                平安态势分析
            </div>
            <div id="patsStat"></div>
        </div>
    </div>
</template>

<script>
import echarts from "echarts";
import { sjsbOption,sjslOption,patsOption } from "./statConfig";

import Pubsub from "../../utils/pubsub";
import {
    queryNewReceive,
    getEventReportTrend,
    getEventAcceptTrend,
} from "../../config/api";
export default {
    data() {
        return {
            chart1:null,
            sjjsObj:{},
            sjblObj:{},
        };
    },
    mounted() {
        this.pubsub_token1 = Pubsub.subscribe("refreshDpData", (t, args) => {
            let { type } = args;
            this.commonRequest.type = type;
            this.initData();
        });
        this.initData();
        this.initChartData();
        setTimeout(()=>{
            $("#ssjsBg").addClass("flipInY");
        },2000)
        setTimeout(()=>{
            $("#ssjsBg2").addClass("flipInY");
        },2000)
        //  setInterval(()=>{
        //     $("#ssjsBg").removeClass("flipInY").addClass("flipInY");
        // },3000)
        // setTimeout(()=>{
        //     $("#ssjsBg").addClass("flipInY");
        // },4000)
    },
    destroyed(){
        this.pubsub_token1 && Pubsub.unsubscribe(this.pubsub_token1);
    },
    methods: {
        initChartData() {
            this.myChart1 = echarts.init(document.getElementById("stat1"));
            this.myChart2 = echarts.init(document.getElementById("stat2"));
            this.myChart1.setOption(sjsbOption());
            this.myChart2.setOption(sjslOption());
            this.chart1 = patsOption([],this.chart1);
        },
        initData(){
            this.queryNewReceive();
            this.getEventReportTrend();
            this.getEventAcceptTrend();
        },
        /**
         * 实时事件接收／办理情况
         */
        queryNewReceive(){
            queryNewReceive(this.commonRequest).then((result)=>{
                let finish = result.data.finish || [];
                let receive = result.data.receive || [];
                this.sjjsObj = receive[0] || {};
                this.sjblObj = finish[0] || {};
            })
        },
        /**
         * 事件上报趋势
         */
        getEventReportTrend(){
            getEventReportTrend(this.commonRequest).then((result)=>{
                let data = result.data;
                let series=[],legend = {};
                let l = data.legend;
                let s = data.series;
                legend.data = l;
                this.myChart1.setOption({
                    series:s,
                    legend,
                })
            })
        },
        /**
         * 事件受理趋势
         */
        getEventAcceptTrend(){
            getEventAcceptTrend(this.commonRequest).then((result)=>{
                 let data = result.data;
                let series=[],legend = {};
                let l = data.legend;
                let s = data.series;
                legend.data = l;
                this.myChart2.setOption({
                    series:s,
                    legend,
                })
            })
        },
    }
};
</script>

<style lang="scss" scoped>
@import "../../css/dpCommon.scss";

.right-container {
    width: 840px;
    box-sizing: border-box;
    .right-top {
        display: flex;
        margin-top: 62px;
        .ss-bg {
            height: 250px;
            width: 383px;
            background: url("../../assets/dp4/right-ss-bg.png") no-repeat;
            background-size: 100% 100%;
            box-sizing: border-box;
            padding-top: 16px;
            &:first-child {
                margin-left: 23px;
                margin-right: 35px;
            }
            .ss-title {
                color: #fff;
                padding-left: 88px;
            }
            .ss-content {
                margin-top: 25px;
            }
            .ss-row {
                margin-bottom: 10px;
                padding: 0 20px;
                display: flex;
                font-size: 12px;
                .row-label {
                    color: #fff;
                }
                .row-info {
                    color: #f9b90b;
                    flex: 1;
                }
            }
            .clamp-text-over {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                max-height: 50px;
            }
        }
    }
    .right-middle {
        display: flex;
        margin-top: 20px;
        .middle-row {
            width: 420px;
        }
        .sjsb-title {
            width: 145px;
            margin-left: 135px;
        }
    }
    .sj-stat {
        height: 282px;
        width: 400px;
        margin-top: 15px;
    }
    .right-bottom{
        height:215px;
        box-sizing: border-box;
        overflow: hidden;
    }
    .pats-title{
        width: 145px;
        margin-left: 333px;
    }
    #patsStat{
        height:160;
        margin-top: 12px;
        width:794px;
    }
}
.floatT{
    animation: heart 1.3s ease-in-out 2.7s infinite alternate;
}
@keyframes heart{
from{transform:translate(0,0)}
to{transform:translate(0,10px)}
}
</style>